<!--<script setup>-->
<!--import {-->
<!--  onMounted,-->
<!--  reactive,-->
<!--  ref-->
<!--} from 'vue';-->
<!--import {-->
<!--  getMainPageData-->
<!--} from '@/api/getData.js';-->
<!--import * as echarts from "echarts";-->
<!--/* 变量定义开始 */-->

<!--//用户总数-->
<!--const userTotal = ref(8888);-->
<!--//学生总数-->
<!--const studentTotal = ref(8888);-->
<!--//课程总数-->
<!--const courseTotal = ref(8888);-->
<!--//考试人次-->
<!--const scoreTotal = ref(8888);-->
<!--//echarts饼状图-->
<!--const option = reactive({-->
<!--  title: {-->
<!--    text: '年级人数分布',-->
<!--    subtext: '每个年级人数',-->
<!--    left: 'center'-->
<!--  },-->
<!--  tooltip: {-->
<!--    trigger: 'item'-->
<!--  },-->
<!--  legend: {-->
<!--    orient: 'vertical',-->
<!--    left: 'left'-->
<!--  },-->
<!--  series: [{-->
<!--    name: '班级/人数',-->
<!--    type: 'pie',-->
<!--    radius: '50%',-->
<!--    data: [{-->
<!--      value: 1048,-->
<!--      name: '一年级'-->
<!--    },-->
<!--      {-->
<!--        value: 735,-->
<!--        name: '二年级'-->
<!--      },-->
<!--      {-->
<!--        value: 580,-->
<!--        name: '三年级'-->
<!--      },-->
<!--      {-->
<!--        value: 484,-->
<!--        name: '四年级'-->
<!--      },-->
<!--      {-->
<!--        value: 300,-->
<!--        name: '五年级'-->
<!--      }-->
<!--    ],-->
<!--    emphasis: {-->
<!--      itemStyle: {-->
<!--        shadowBlur: 20,-->
<!--        shadowOffsetX: 10,-->
<!--        shadowColor: 'rgba(0, 0, 0, 0.5)'-->
<!--      }-->
<!--    }-->
<!--  }]-->
<!--})-->
<!--/* 变量定义结束 */-->


<!--/* 函数开始 */-->
<!--//获取头部4个数据-->
<!--const getCountData = () => {-->
<!--  //请求后台获取数据-->
<!--  getMainPageData().then(res => {-->
<!--    if (res != -1) {-->
<!--      //绑定数据-->
<!--      userTotal.value = res.datas.userTotal;-->
<!--      studentTotal.value = res.datas.studentTotal;-->
<!--      courseTotal.value = res.datas.courseTotal;-->
<!--      scoreTotal.value = res.datas.scoreTotal;-->
<!--    }-->
<!--  })-->
<!--}-->

<!--//渲染图表-->
<!--const renderEcharts = () => {-->
<!--  //渲染-->
<!--  let myCharts = echarts.init(document.getElementById('echartsDomId'));-->
<!--  myCharts.setOption(option)-->
<!--}-->
<!--/* 函数结束 */-->

<!--onMounted(() => {-->
<!--  getCountData(); //顶部4条数据的初始化-->
<!--  renderEcharts();-->
<!--})-->
<!--</script>-->

<!--<template>-->
<!--  <div class="main-main">-->
<!--    <div class="main-header">-->
<!--      <div class="main-count-item">-->
<!--        <div class="main-count-icon">-->
<!--          <UserFilled class="icon" />-->
<!--        </div>-->
<!--        <div class="main-count-content">-->
<!--          <div class="main-count-title">用户总数</div>-->
<!--          <div class="main-count-number">{{userTotal}}人</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="main-count-item">-->
<!--        <div class="main-count-icon">-->
<!--          <HomeFilled class="icon" />-->
<!--        </div>-->
<!--        <div class="main-count-content">-->
<!--          <div class="main-count-title">学生总数</div>-->
<!--          <div class="main-count-number">{{studentTotal}}人</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="main-count-item">-->
<!--        <div class="main-count-icon">-->
<!--          <TrendCharts class="icon" />-->
<!--        </div>-->
<!--        <div class="main-count-content">-->
<!--          <div class="main-count-title">课程总数</div>-->
<!--          <div class="main-count-number">{{courseTotal}}科</div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="main-count-item">-->
<!--        <div class="main-count-icon">-->
<!--          <Platform class="icon" />-->
<!--        </div>-->
<!--        <div class="main-count-content">-->
<!--          <div class="main-count-title">考试人次</div>-->
<!--          <div class="main-count-number">{{scoreTotal}}人/次</div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="main-card">-->
<!--      <el-card class="box-card">-->
<!--        <template #header>-->
<!--          <div>-->
<!--            <span>年级人数分析图表</span>-->
<!--          </div>-->
<!--        </template>-->
<!--        <div id="echartsDomId" class="echarts-class">-->

<!--        </div>-->
<!--      </el-card>-->
<!--      <el-card  class="box-card">-->
<!--        <template #header>-->
<!--          <div>-->
<!--            <span>年级人数分析图表</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-card>-->
<!--      <el-card  class="box-card">-->
<!--        <template #header>-->
<!--          <div>-->
<!--            <span>年级人数分析图表</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-card>-->
<!--    </div>-->
<!--  </div>-->

<!--</template>-->

<!--<style scoped>-->
<!--.main-main {-->
<!--  background-color: rgb(240, 242, 245);-->
<!--  height: 93vh;-->
<!--  padding: 20px;-->
<!--  padding-top: 50px;-->
<!--}-->

<!--.main-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--}-->

<!--.main-count-item {-->
<!--  background-color: white;-->
<!--  width: 23%;-->
<!--  height: 110px;-->
<!--  padding: 10px;-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  border-radius: 10px;-->
<!--  box-shadow: 0px 0px 20px 0px rgb(210, 210, 210);-->
<!--}-->

<!--.main-count-icon {-->
<!--  color: rgb(64, 201, 198);-->
<!--  width: 90px;-->
<!--  height: 90px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  transition: all 0.5s;-->
<!--  border-radius: 10px;-->
<!--}-->

<!--.main-count-icon:hover {-->
<!--  color: white;-->
<!--  background-color: rgb(64, 201, 198);-->
<!--}-->

<!--.icon {-->
<!--  width: 50px;-->
<!--  height: 50px;-->
<!--}-->

<!--.main-count-content {-->
<!--  margin-right: 5px;-->
<!--}-->

<!--.main-count-title {-->
<!--  color: rgb(140, 140, 200);-->
<!--  font-size: 20px;-->
<!--  font-weight: bolder;-->
<!--}-->

<!--.main-count-number {-->
<!--  margin-top: 5px;-->
<!--  color: rgb(102, 102, 102);-->
<!--  font-size: 20px;-->
<!--  font-weight: bolder;-->
<!--}-->

<!--.main-card {-->
<!--  margin-top: 50px;-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--}-->

<!--.box-card {-->
<!--  width: 600px;-->
<!--  height: 550px;-->
<!--}-->
<!--.echarts-class{-->
<!--  width: 550px;-->
<!--  height: 500px;-->
<!--}-->
<!--</style>-->
<script setup>


</script>

<template>
  <div class="header-carousel owl-carousel">
    <div class="header-carousel-item">
      <img src="#" class="img-fluid w-100" alt="Image">
      <div class="carousel-caption">
        <div class="carousel-caption-content p-3" style="max-width: 900px;">
          <h4 class="text-secondary text-uppercase sub-title fw-bold mb-4 wow fadeInUp" data-wow-delay="0.1s" style="letter-spacing: 3px;">Let's Dance</h4>
          <h1 class="display-1 text-capitalize text-white mb-4 wow fadeInUp" data-wow-delay="0.3s">Once A Dancer, Is Always A Dance</h1>
          <p class="fs-5 wow fadeInUp" data-wow-delay="0.5s">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
          </p>
          <div class="pt-2">
            <a class="btn btn-primary rounded-pill text-white py-3 px-5 m-2 wow fadeInLeft" data-wow-delay="0.1s" href="#">Join Now</a>
            <a class="btn btn-secondary rounded-pill text-white py-3 px-5 m-2 wow fadeInRight" data-wow-delay="0.3s" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="header-carousel-item">
      <img src="#" class="img-fluid w-100" alt="Image">
      <div class="carousel-caption">
        <div class="carousel-caption-content p-3" style="max-width: 900px;">
          <h4 class="text-secondary text-uppercase sub-title fw-bold mb-4" style="letter-spacing: 3px;">Let's Dance</h4>
          <h1 class="display-1 text-capitalize text-white mb-4">Once A Dancer, Is Always A Dance</h1>
          <p class="fs-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
          </p>
          <div class="pt-2">
            <a class="btn btn-primary rounded-pill text-white py-3 px-5 m-2 wow fadeInLeft" data-wow-delay="0.1s" href="#">Join Now</a>
            <a class="btn btn-secondary rounded-pill text-white py-3 px-5 m-2 wow fadeInRight" data-wow-delay="0.3s" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
    <div class="header-carousel-item">
      <img src="#" class="img-fluid w-100" alt="Image">
      <div class="carousel-caption">
        <div class="carousel-caption-content p-3" style="max-width: 900px;">
          <h4 class="text-secondary text-uppercase sub-title fw-bold mb-4" style="letter-spacing: 3px;">Let's Dance</h4>
          <h1 class="display-1 text-capitalize text-white mb-4">Once A Dancer, Is Always A Dance</h1>
          <p class="fs-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
          </p>
          <div class="pt-2">
            <a class="btn btn-primary rounded-pill text-white py-3 px-5 m-2 wow fadeInLeft" data-wow-delay="0.1s" href="#">Join Now</a>
            <a class="btn btn-secondary rounded-pill text-white py-3 px-5 m-2 wow fadeInRight" data-wow-delay="0.3s" href="#">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Carousel End -->

  <!-- Team Start -->
  <div class="container-fluid team pb-5">
    <div class="container pb-5">
      <div class="pb-5">
        <h4 ></h4>
        <h1 class="display-2 mb-0 wow fadeInUp" data-wow-delay="0.3s">家校通智慧系统</h1>
      </div>
      <div class="team-carousel owl-carousel pt-5 wow fadeInUp" data-wow-delay="0.1s">
        <div class="team-item border rounded wow fadeInUp" data-wow-delay="0.1s">
          <div class="team-img bg-secondary rounded-top">
            <img src="#" class="img-fluid rounded-top w-100" alt="Image">
            <div class="team-icon">
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-facebook-f"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-twitter"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-instagram"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
            </div>
          </div>
          <div class="team-content text-center p-4">
            <a href="#" class="h4">Emily Ava</a>
            <p class="mb-0 text-primary">Instructor</p>
          </div>
        </div>
        <div class="team-item border rounded wow fadeInUp" data-wow-delay="0.3s">
          <div class="team-img bg-secondary rounded-top">
            <img src="#" class="img-fluid rounded-top w-100" alt="Image">
            <div class="team-icon">
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-facebook-f"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-twitter"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-instagram"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
            </div>
          </div>
          <div class="team-content text-center p-4">
            <a href="#" class="h4">Emily Ava</a>
            <p class="mb-0 text-primary">Instructor</p>
          </div>
        </div>
        <div class="team-item border rounded wow fadeInUp" data-wow-delay="0.5s">
          <div class="team-img bg-secondary rounded-top">
            <img src="#" class="img-fluid rounded-top w-100" alt="Image">
            <div class="team-icon">
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-facebook-f"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-twitter"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-instagram"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
            </div>
          </div>
          <div class="team-content text-center p-4">
            <a href="#" class="h4">Emily Ava</a>
            <p class="mb-0 text-primary">Instructor</p>
          </div>
        </div>
        <div class="team-item border rounded wow fadeInUp" data-wow-delay="0.7s">
          <div class="team-img bg-secondary rounded-top">
            <img src="#" class="img-fluid rounded-top w-100" alt="Image">
            <div class="team-icon">
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-facebook-f"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-twitter"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-instagram"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
            </div>
          </div>
          <div class="team-content text-center p-4">
            <a href="#" class="h4">Emily Ava</a>
            <p class="mb-0 text-primary">Instructor</p>
          </div>
        </div>
        <div class="team-item border rounded wow fadeInUp" data-wow-delay="0.9s">
          <div class="team-img bg-secondary rounded-top">
            <img src="#" class="img-fluid rounded-top w-100" alt="Image">
            <div class="team-icon">
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-facebook-f"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-twitter"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-instagram"></i></a>
              <a class="btn btn-square btn-primary rounded-circle mx-1" href=""><i class="fab fa-linkedin-in"></i></a>
            </div>
          </div>
          <div class="team-content text-center p-4">
            <a href="#" class="h4">Emily Ava</a>
            <p class="mb-0 text-primary">Instructor</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Team End -->

  <!-- About Start -->
  <div class="container-fluid py-5">
    <div class="container py-5">
      <div class="row g-5 align-items-center">
        <div class="col-lg-5 wow fadeInLeft" data-wow-delay="0.1s">
          <div class="border bg-secondary rounded">
            <img src="#" class="img-fluid w-100 rounded" alt="Image">
            <img src="#" class="img-fluid w-100 rounded" alt="Image">
            <img src="#" class="img-fluid w-100 rounded" alt="Image">
          </div>
        </div>
        <div class="col-lg-7 wow fadeInRight" data-wow-delay="0.3s">
          <h4 class="text-secondary sub-title fw-bold">家校通</h4>
          <h1 class="display-3 mb-4"><strong class="text-primary">家校通</strong>家校通</h1>
          <p>
            家校通
          </p>
          <p class="mb-4">家校通
          </p>
          <a class="btn btn-primary rounded-pill text-white py-3 px-5" href="#">家校通</a>
        </div>
      </div>
    </div>
  </div>
  <!-- About End -->


  <!-- Copyright Start -->
  <div class="container-fluid copyright py-4">
    <div class="container">
      <div class="row g-4 align-items-center">
        <div class="col-md-6 text-center text-md-start mb-md-0">
          <span class="text-white"><a href="#" class="border-bottom text-white"><i class="fas fa-copyright text-light me-2"></i>家校通</a>家校通</span>
        </div>
        <div class="col-md-6 text-center text-md-end text-white">
          <a target="_blank" href="#" title="网页模板" class="border-bottom text-white">1111</a>
        </div>
      </div>
    </div>
  </div>
  <!-- Copyright End -->


  <!-- Back to Top -->
  <a href="#" class="btn btn-primary btn-lg-square back-to-top"><i class="fa fa-arrow-up"></i></a>
</template>

<style scoped>
  @import "@/css/style.css";
  @import "@/css/bootstrap.min.css";
  @import "@/css/lightbox.min.css";
  @import "@/css/owl.carousel.min.css";
  @import "@/css/animate.min.css";
  @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css";
  @import "https://use.fontawesome.com/releases/v5.15.4/css/all.css";

</style>